<template>
  <div>
    <el-form :model="form">
      <el-form-item label="是否开启">
        <el-radio v-model="form.is_use" :label=true>是</el-radio>
        <el-radio v-model="form.is_use" :label=false>否</el-radio>
      </el-form-item>
      <el-form-item label="优惠方式" v-if="form.is_use">
        <el-col :span="3" class="el-flex">
          <div class="wt80">满</div>
          <!-- <el-input v-model="form.full"></el-input> -->
          <el-input-number v-model="form.full" controls-position="right" :precision="2" :min="0" :max="999999"></el-input-number>
          <div class="ml10">元</div>
        </el-col>
        <el-col :span="3" class="el-flex">
          <div class="wt80">，减</div>
          <!-- <el-input v-model="form.reduction"></el-input> -->
          <el-input-number v-model="form.reduction" controls-position="right" :precision="2" :min="0" :max="999999"></el-input-number>
          <div class="ml10">元</div>
        </el-col>
      </el-form-item>

    </el-form>
    <div>仅限于首次在本店购买下单的用户，一笔订单只能使用一个首单优惠。可与其他优惠叠加计算</div>
    <div class="mt30">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dataFormSubmit()">提交</el-button>
        <!-- <el-button @click="cancel()">取消</el-button> -->
      </span>
    </div>
  </div>

</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      form: {
        is_use: null,
        full: null,
        reduction: null
      }
    }
  },
  mounted () {
    this.getDate()
  },
  methods: {
    getDate () {
      seviceApi.getFirstOrder().then(res => {
        if (res && res.data.code == 200) {
          if (res.data.data != null) {
            this.form = res.data.data
          }
        }
      })
    },
    // 保存
    dataFormSubmit () {
      if (!this.form.is_use) {
        this.form.full = null
        this.form.reduction = null
      } else {
        if (!this.form.full || !this.form.reduction) {
          this.$message.error('请输入优惠方式');
          return
        }
      }
      seviceApi.saveFirstOrder(this.form).then(res => {
        if (res && res.data.code == 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.getDate()
        }
      })
    },
    // 取消
    cancel () {
      this.form = {
        is_use: null,
        full: null,
        reduction: null
      }
    }
  }
}
</script>

<style>
.el-flex {
  display: flex;
}

.mt30 {
  margin-top: 30px;
}

.wt80 {
  width: 80px;
}

.ml10 {
  margin-left: 10px;
}
</style>
